<template>
	<div v-cloak class="aui-wrapper aui-page__iframe">
		<div class="aui-content__wrapper">
			<div class="aui-content">
				<el-card shadow="never" class="aui-card--fill">
					<div class="mod-demo__locate">
						<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
							<el-form-item>
								<el-radio-group size="small" v-model="dataForm.type">
								    <el-radio label="STRAY">小箱</el-radio>
								    <el-radio label="MTRAY">中箱</el-radio>
								    <el-radio label="LTRAY">大箱</el-radio>
								  </el-radio-group>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.count" size="small" placeholder="数量" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="success" size="small" @click="btnClickPrint222()">打印条码</el-button>
							</el-form-item>
						</el-form>
					</div>
					<div v-show="false">
						<div>
							<button v-print="'#printObj'" id="print11">Print local range</button>
						</div>
						<div id="printObj">
							<img v-for=" item in  bardddd" :key="item.lpn1" :id="item.lpn1" />
						</div>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<!-- <script src="../../../utils/jquery.min.js" type="text/javascript"></script> -->
<script>
	// import jQuery from '../../../utils/jquery.min.js'
	// import $ from '../../../utils/jquery.min.js'
	// //	import '@/utils/jquery.min.js'
	// import '@/assets/hiprint/polyfill.min.js'
	// import '@/assets/hiprint/plugins/jquery.minicolors.min.js'
	// import {
	// 	hiprint
	// } from '@/assets/hiprint/hiprint.bundle.js'

	// import '@/assets/hiprint/plugins/qrcode.js'
	import '@/assets/hiprint/plugins/JsBarcode.all.min.js'
	// import '@/assets/hiprint/plugins/jquery.hiwprint.js'
	// import {
	// 	defaultElementTypeProvider
	// } from '@/assets/hiprint/etypes/default-etype-provider.js'

	// import {
	// 	setTimeout
	// } from 'timers';

	import {
		getAPILPN
	} from '@/network/lswms/base/printBarcode.js'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	var hiprintTemplate;
	export default {
		data() {
			return {
				dataForm: {
					type: 'STRAY',
					count: 0
				},
				bardddd: [],
				traytype: [{
						value: "STRAY",
						label: "小箱"
					},
					{
						value: "MTRAY",
						label: "中箱"
					},
					{
						value: "LTRAY",
						label: "大箱"
					}
				]
				// printObj: {
				// 					id: "barcode",
				// 					preview:false,
				// 					popTitle: 'good print',
				// 					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
				// 					extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
				// 					beforeOpenCallback(vue) {
				// 						vue.printLoading = true
				// 						console.log('打开之前')
				// 					},
				// 					openCallback(vue) {
				// 						vue.printLoading = false
				// 						console.log('执行了打印')
				// 					},
				// 					closeCallback(vue) {
				// 						console.log('关闭了打印工具')
				// 					}
				// 				},
			}
		},
		computed: {

		},
		methods: {
			btnClickPrint222() {
				if (this.dataForm.count <= 0) {
					return ElMessage({
						message: '请输入数量',
						type: 'warning',
						duration: 1000
					});
				}
				this.bardddd = [];
				//var JsBarcode = require('jsbarcode');
				for (let i = 0; i < this.dataForm.count; i++) {
					let ddd = {
						lpn1: 'a' + i,
						img1: ""
					}
					this.bardddd.push(ddd);
				}


				getAPILPN(this.dataForm).then((res) => {
					this.printList = res.data;

					for (let i = 0; i < this.printList.length; i++) {
						let lpn = this.printList[i].LPN;
						// let ddd = {
						// 	lpn1: "",
						// 	img1: ""
						// }
						//ddd.lpn1 = lpn;

						const {
							DOMImplementation,
							XMLSerializer
						} = require('xmldom');
						const xmlSerializer = new XMLSerializer();
						const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml',
							'html', null);
						const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

						JsBarcode('#a' + i, lpn, {
							xmlDocument: document,
							// fontOptions:"bold",//使文字加粗体或变斜体
							font: "Consolas", //设置文本的字体
							textAlign: "center", //设置文本的水平对齐方式
							fontSize: 20, //设置文本的大小
						});

						//ddd.img1 = xmlSerializer.serializeToString(svgNode);


						//printObj.appendChild();
						// var MyComponent =  createApp({
						// 	template: ddd.img1
						// })

						//	new MyComponent().$mount('#printObj');
						// MyComponent.mount('#printObj');
					}



					let print11 = document.getElementById("print11");
					print11.click();
				})

			},



			btnClickPrint() {

				if (this.dataForm.count <= 0) {
					return ElMessage({
						message: '请输入数量',
						type: 'warning',
						duration: 1000
					});
				}

				hiprint.init();
				// <!-- 创建打印模板对象-->
				var hiprintTemplate = new hiprint.PrintTemplate();
				// <!-- 模板对象添加打印面板 paperHeader：页眉线 paperFooter：页尾线-->
				var panel = hiprintTemplate.addPrintPanel({
					width: 80,
					height: 70,
					paperNumberDisabled: false
				});
				// <!-- 文本 打印面板添加文本元素-->
				// panel.addPrintText({ options: { "left": 7.5, "top": 9, "height": 15, "width": 127.5, "field": "product", "testData": "加多老吉茶 100889", "hideTitle": true } });
				//                     <!-- 文本 打印面板添加文本元素-->
				// panel.addPrintText({ options: { "left": 120, "top": 27, "height": 33, "width": 13.5, "field": "ptype", "testData": "酒水", "hideTitle": true } });
				// <!-- 条形码 打印面板添加二维码元素-->
				panel.addPrintText({
					options: {
						"left": 20,
						"top": 25,
						"height": 120,
						"width": 180,
						"field": "code",
						"testData": "100889",
						"textAlign": "center",
						"textType": "barcode"
					}
				});
				//	panel.addPrintText({options: {"left": 20,"top": 205,"height": 120,"width": 20,"field": "code","testData": "100889","textAlign":"center"} });
				// <!-- 打印设计-->
				// hiprintTemplate.design('#hiprint-printTemplate2');					

				//    hiprintTemplate.print([{code:'M00012'},{code:'M00013'}])
				// hiprint.init();

				// let printdata = new Array();

				// getAPILPN(this.dataForm).then((res) => {
				// 	this.printList = res.data;

				// 	for (let i = 0; i < this.printList.length; i++) {
				// 		let lpn = this.printList[i].LPN;

				// 		printdata.push({
				// 			code: lpn
				// 		});
				// 	}
				// 	hiprintTemplate.print(printdata);
				// })
				hiprintTemplate.print({
					'code': 'S000000002'
				});

				// var obj =
				// 	'{"panels":[{"index":0,"height":60,"width":80,"paperHeader":0,"paperFooter":113.38582677165356,"printElements":[{"options":{"left":45,"top":6,"height":73.5,"width":80,"field":"CODE","textType":"barcode","hideTitle":true},"printElementType":{"type":"text"}}],"paperNumberLeft":140,"paperNumberTop":91,"paperNumberDisabled":true}]}';
				// var printdata = new Array();
				// printdata.push({
				// 	CODE: 'M00012'
				// });
				// printdata.push({
				// 	CODE: 'M00013'
				// });
				// printdata.push({
				// 	CODE: 'M00014'
				// });
				// printdata.push({
				// 	CODE: 'M00015'
				// });
				// printdata.push({
				// 	CODE: 'M00016'
				// });
				// printdata.push({
				// 	CODE: 'M00017'
				// });
				// $.each(result.data.data,function (i,n) {
				// 			            var item = {
				// 			                CODE : n.MATERIALCODE,
				// 			                NAME : n.MATERIALNAME

				// 			            };
				// 			            printdata.push(item);
				// 			        });
				// if (printdata.length > 0) {
				// 	var barCodehiprintTemplate = new hiprint.PrintTemplate({
				// 		template: JSON.parse(obj)
				// 	});
				// 	var $html = barCodehiprintTemplate.getHtml(printdata);
				// 	barCodehiprintTemplate.printByHtml($html);
				// }

			},
		},
		mounted() {
			let self = this


			// 	$(document).ready(function() {
			// 		//初始化打印插件
			// 		hiprint.init({
			// 			providers: [new defaultElementTypeProvider()]
			// 		});
			// 		//设置左侧拖拽事件
			// 		// hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
			// 		// let _customPrintJson = customPrintJson;
			// 		// hiprintTemplate = new hiprint.PrintTemplate({
			// 		// 	template: _customPrintJson,
			// 		// 	settingContainer: '#PrintElementOptionSetting',
			// 		// 	paginationContainer: '.hiprint-printPagination'
			// 		// });
			// 		//打印设计
			// 		// hiprintTemplate.design('#hiprint-printTemplate');
			// 		// self.setCurrentPaper(self.paperMap.A4);
			// 		// self.elementAddEventListen();
			// 		// $('.params_drawer').width($('.params_setting_container').width() * 1) //动态设置右部参数设置框宽度
			// 	});
		}
	}
</script>

<style scoped lang="scss">

</style>
